<template>
  <div class="music2">
    <div v-for="(item, index) in imgs" :key="index">
      <a href="">
        <img :src="`${item.url}`" alt="" />
      </a>
      <div class="fle">
        <span>《{{ item.name }}》</span> <br />
        <i>歌手:</i><i>{{ item.peoper }}</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Music2",
  data() {
    return {
      imgs: [
        {
          name: "星河万里",
          url: require("../assets/img3/2.png"),
          peoper: "Rom刑锐",
        },
        {
          name: "第三人称",
          url: require("../assets/img3/4.png"),
          peoper: "买辣椒也用券",
        },
        {
          name: "迷途的孤鸟",
          url: require("../assets/img3/5.png"),
          peoper: "王天阳",
        },
        { name: "鼓楼", url: require("../assets/img3/1.png"), peoper: "赵雷" },
      ],
    };
  },
};
</script>

<style scoped>
.music2 {
  display: flex;
  width: 728px;
  height: 200px;
  margin: 18px auto;
  /* background-color: skyblue; */
  border: 1px solid #ddd;
  border-radius: 17px;
}
.music2:hover {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  transition: all 0.3s;
}
img {
  width: 165px;
  margin: 14px 8px;
  margin-bottom: 0px;
}
img:hover {
  cursor: pointer;
}
.fle {
  margin: 0px 18px;
}
i {
  text-decoration: none;
}
</style>
